<template>
    <div id="app">
        <div v-if="isLogin">
            <!--      <button>大小写</button>-->
            <!--      <button>驼峰/下划线</button>-->
            <button @click="()=>createA('/','_blank')">查表数据</button>
            <button @click="()=>createA('/bind2','_blank')">绑定表之间的字段</button>
            <button @click="()=>createA('/tableNet','_blank')">表网图</button>
            <button @click="()=>createA('/storyList','_blank')">wiki系统</button>
            <button @click="()=>createA('/value2json','_blank')">value2json</button>
            <button @click="()=>createA('/urlparse','_blank')">urlparse</button>
            <button @click="()=>createA('/fieldsList','_blank')">自定义字段</button>
            <button @click="()=>createA('/imageList','_blank')">图床系统</button>
            <button @click="()=>loginout()">退出</button>
            <div v-if="currentUser">
                <div>
                    数据库:{{currentUser.database}}
                </div>
                <div>
                    host:{{currentUser.host}}
                </div>

            </div>
        </div>
        <!--sql编辑器-->
      <!--  <div id="mysqlEditor" v-if="isLogin">
        </div>-->


        <div style="padding: 20px">
            <router-view/>
        </div>

        <div style="position: fixed;bottom: 100px;right: 50px;box-shadow: 10px 10px 10px #dddddd;"
             @click="()=>{jquery(document).scrollTop(0);}">
            <i class="iconfont el-icon-upload2" style="font-size: 50px"></i>
        </div>
    </div>
</template>
<script>
    import {createA, getCookie, safeParseJson, setCookie} from "./utils/utils";

    const lodash = require('lodash')
    export default {
        data() {
            return {
                currentUser:safeParseJson(getCookie("currentUser")),
                createA,
                jquery: window.$,
                document,
            }
        },
        computed: {
            isLogin() {
                if (getCookie('currentUser')) {
                    return true;
                } else {
                    return false
                }
            }
        },
        mounted() {
        },
        methods: {
            /*
            * 初始化编辑器
            * */
            initEdit() {
                var editor = ace.edit("mysqlEditor");
                editor.getSession().setMode("ace/mode/mysql"); // 语言高亮
                // editor.setReadOnly(false);//设置只读（true时只读，用于展示代码）
                //自动换行,设置为off关闭
                editor.setOption("wrap", "free");
                //以下部分是设置输入代码提示的
                editor.setOptions({
                    enableBasicAutocompletion: true,
                    enableSnippets: true,
                    enableLiveAutocompletion: true
                });
                editor.getSession().setUseWrapMode(true); //支持代码折叠
                //editor.getSession().setMode(&#39;ace/mode/javascript&#39;); //设置语言模式
                editor.selection.getCursor(); //获取光标所在行或列
                //editor.gotoLine(lineNumber); //跳转到行
                editor.session.getLength(); //获取总行数
                // editor.insert("Something cool");
                editor.getSession().setUseSoftTabs(true);


                //自定义补全
                var self = this;
                var languageTools = ace.require("ace/ext/language_tools");
                languageTools.addCompleter({
                    insertMatch(editor, data) {
                        console.log("insertMatch", editor, data)
                        editor.completer.insertMatch({value: data.caption});

                    },
                    getCompletions: function (editor, session, pos, prefix, callback) {
                        var cursor = session.selection.cursor
                        session.getLine(cursor.row).slice(0, cursor.column)

                        var str = prefix
                        console.log('客户输入', str, cursor)
                        callback({
                            caption: str,//字幕，下拉提示左侧内容,这也就是我们输入前缀匹配出来的内容，所以这里必须包含我们的前缀
                            value: str,//值，这就是匹配我们输入的内容，比如输入s或者select,这一行就会出现在提示框里，可根据自己需求修改，就是你想输入什么显示出北京呢，就改成什么
                            meta: str, //类型，下拉提示右侧内容
                            type: "keyword",//可写为keyword
                            score: 2 // 让它排在最上面，类似权值的概念
                        })
                        /*  axios
                              .get(`/api/databases/search?keyword=${str}`)
                              .then((res) => res.data)
                              .then((res) => {
                                  // console.log('查询的结果', res)
                                  var compeletionList=self.getCompletionListForCallBack(res,prefix)
                                  callback(null, compeletionList);
                              });*/
                    }

                });
            },
            getCompletionListForCallBack(result, prefix) {
                var _list = []
                lodash.map(result, (table) => {
                    _list.push({
                        caption: prefix + table.tableName.substring(0, 3),//字幕，下拉提示左侧内容,这也就是我们输入前缀匹配出来的内容，所以这里必须包含我们的前缀
                        value: table.tableName,//值，这就是匹配我们输入的内容，比如输入s或者select,这一行就会出现在提示框里，可根据自己需求修改，就是你想输入什么显示出北京呢，就改成什么
                        meta: table.tableName, //类型，下拉提示右侧内容
                        type: "keyword",//可写为keyword
                        score: 2 // 让它排在最上面，类似权值的概念
                    })
                    /*if(table.fields){
                        lodash.map(table.fields, (field) => {
                            _list.push({
                                caption: table.tableName.substring(0, 3)+"."+field&&field.name&&field.name.substring(0, 3),//字幕，下拉提示左侧内容,这也就是我们输入前缀匹配出来的内容，所以这里必须包含我们的前缀
                                value: field.name,//值，这就是匹配我们输入的内容，比如输入s或者select,这一行就会出现在提示框里，可根据自己需求修改，就是你想输入什么显示出北京呢，就改成什么
                                meta: field.name, //类型，下拉提示右侧内容
                                type: "keyword",//可写为keyword
                                score: 1 // 让它排在最上面，类似权值的概念
                            })
                        })
                    }*/
                })
                return _list;
            },
            loginout() {
                axios.get('/loginout')
                sessionStorage.setItem("currentUser", "")
                sessionStorage.setItem("SESSION_ID", "")
                setCookie("currentUser", "")
                location.href = "/login"
            }
        }
    }
</script>

<style lang="less">
    #mysqlEditor {
        width: 800px;
        height: 400px;
        margin: 10px;
    }
</style>
